<script setup>
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue';
const store = useUserStore()
const { userInfo } = storeToRefs(store)
const time = computed(() => {
    const r = new Date().getHours()
    if (r >= 5 && r < 12) {
        return '早上好'
    } else if (r >= 12 && r < 18) {
        return '下午好'
    } else {
        return '晚上好'
    }
})

const emit = defineEmits(['goOrder'])
</script>

<template>
    <div class="right">
        <div class="top">
            <div class="lf">
                <img src="/public/avatar.jpg" alt="">
                <div class="info">
                    <h2>{{ userInfo?.nickname }}</h2>
                    <p>{{ time }}~</p>
                    <p>修改个人信息></p>
                </div>

            </div>
            <div class="ri">
                <p>帐号安全：普通</p>
                <p>绑定手机：{{ userInfo.phone }}</p>
            </div>
        </div>
        <div class="bot">
            <a href="#" @click.prevent>
                <img src="/public/portal-icon-1.png" alt="">
                <div>
                    <h3>待支付的订单: <span class="num">{{ store.orderNum.unpay }}</span></h3>
                    <p @click="emit('goOrder','2')">查看待支付订单></p>
                </div>
            </a>
            <a href="#" @click.prevent>
                <img src="/public/portal-icon-2.png" alt="">
                <div>
                    <h3>待收货的订单:<span class="num">{{store.orderNum.payed}}</span></h3>
                    <p @click="emit('goOrder','2')">查看待收货订单></p>
                </div>
            </a>
        </div>
    </div>
</template>

<style scoped lang="less">
.right {
    background-color: #fff;
    float: right;
    height: 75%;
    width: 978px;
    padding: 0 40px;

    .top {
        padding-top: 50px;
        height: 40%;
        border-bottom: 1px solid #c6c3c3;
        color: #b0b0b0;

        .lf {
            float: left;
            height: 100%;

            img {
                float: left;
                width: 159px;
                height: 159px;
                border-radius: 50%;
            }

            .info {
                float: right;
                padding: 50px 0 0 10px;
                color: #616161;

                :nth-child(3) {
                    color: #5ebced;
                    margin-top: 10px;
                }
            }
        }

        .ri {
            float: right;
            height: 100%;
            width: 300px;

            p {
                margin: 5px 0;
            }
        }
    }

    .bot {
        height: 60%;
        padding-top: 50px;

        .num {
            color: #5ebced;
            font-size: 20px;
        }

        a {
            display: inline-block;
            width: 440px;
            height: 100%;
            color: #75798b;

            div {
                float: right;
                margin-right: 200px;
                margin-top: 20px;
            }

            img {
                float: left;
            }
        }
    }
}
</style>
